<template>
	<view class="chooseBox" :class="white ? 'blackBg' : 'whiteBg'">
		<view @click="isLast" class="chooseItem">
			<image class="isBack" :src=" white ? 'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_last.png':'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_last.png'"></image>
			<text style="margin-left: 11rpx;">上一集</text>
		</view>
		<view  @click="chooseSeq" class="chooseItem " :class="white ? 'isBorderBetweenBlack' : 'isBorderBetween'">
			<text style="margin-right: 11rpx;">选集</text>
			<image class="isBack" style="width: 20rpx;height: 10rpx;" :src=" white ? 'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_open.png':'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_open.png'"></image>
		</view>
		<view @click="isNext"  class="chooseItem">
			<text style="margin-right: 11rpx;">下一集</text>
			<image class="isBack" :src=" white ? 'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_next.png':'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_next.png'"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"chooseBox",
		props:{
			white:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			async isLast(){
				await ks.vibrateShort()
				this.$emit('isLast');
			},
			async isNext(){
				await ks.vibrateShort()
				this.$emit('isNext');
			},
			chooseSeq(){
				this.$emit('chooseSeq');
			}
		}
	}
</script>

<style scoped lang="scss">
	.isBorderBetweenBlack::before {
		left: 0;
	}
	.isBorderBetweenBlack::after {
		right: 0;
	}
	.isBorderBetweenBlack::before,
	.isBorderBetweenBlack::after {
		content: '';
		position: absolute;
		width: 1rpx;
		height: 30%;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: #666666;
	}
	.isBorderBetweenBlack {
		position: relative;
	}
	
	.isBorderBetween::before {
		left: 0;
	}
	.isBorderBetween::after {
		right: 0;
	}
	.isBorderBetween::before,
	.isBorderBetween::after {
		content: '';
		position: absolute;
		width: 1rpx;
		height: 30%;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: white;
	}
	.isBorderBetween {
		position: relative;
	}
	.isBack {
		width: 38rpx;
		height: 38rpx;
	}
	.blackBg{
		background-color: white;
		color: #333333;
	}
.whiteBg{
	color: white;
}
.chooseItem {
	font-size: 30rpx;
	width: 33.33%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chooseBox {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
